<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <input id="input" type="text" />
    <span id="span"></span>

    <script type="text/javascript">
      /**
       * 看到这题感觉天都塌了，这题可怎么写才能不白写呢
       * 这里先做个区分：onchange与oninput -前者是失去焦点后触发，后者是实时触发
       * 当然我们这题是规定使用onchange
       * 对于这种简单的步骤可以从封装函数开始,这里我们将操作节点的信息以字符串传入，使用querySelector作为筛选条件以适配各种情况
       * 但仅仅是这样还不够，我们可以处理一下异常情况，这里我们使用try catch来处理异常情况，又多用了一个知识点（bushi
       * 好了，编不下去了，希望下一题能有点含金量(っ °Д °;)っ
       */

      const undateBind = (input, output) => {
        try {
          input = document.querySelector(input);
          output = document.querySelector(output);
          if (!input) {
            throw new Error("input is not exist");
            return;
          }
          if (!span) {
            throw new Error("span is not exist");
            return;
          }

          input.onchange = function (e) {

            //这里用 e.target.value完全没问题，但因为平台测试方式的问题，这里用e.target.value会报错，可以改成input.value通过
            span.innerHTML = e.target.value;
          };
        } catch (error) {
          console.log(error);
        }
      };

      //正常测试
      undateBind("#input", "#span");

      //填个不存在的节点，会抛出异常
      undateBind("#input111", "#span");

    </script>
  </body>
</html>
